Laravel: 初探 Router, view & blade-Day09

2023 iThome 鐵人賽

DAY 10

Modern Web

前輩說Laravel不難，好啊那就1人前後端試試看啊系列第 10 篇

15th鐵人賽 laravel

Global Rachel

團隊差點不能成團

2023-09-25 22:43:24

411 瀏覽

分享至

請搭配服用文檔:Laravel: routing
Laravel: blade

Laravel的Router

routes
|--api.php
|--web.php

在app的routes底下可以看到api.php & web.php的檔案，通常api.php是用來我們使用http CRUD操作的。
目前還不會使用到。就來看web.php吧。

Route::get('/', function () {
    return view('welcome');
});

來到我們之前在Nginx設置的網址，可以看到Laravel內建的View:

這個view可以在resources/ views/ welcome.blade.php裡面找到

resources
|--views
    |--welcome.blade.php

Laravel的Blade: 快速前端模板

Blade是Laravel自己的前端模板，Blade會被編譯成PHP程式碼，也可以被有效地快取，增加網站效能。
這次網站直接挑戰用Blade寫成，當然Laravel也可以跟Vue或React做搭配，有興趣的人自己這邊看囉：
Laravel-Frontend-Using Vue React

Blade也讓我們可以拆解前端元素，製作Layout和可重複利用的Component，
這邊我採用：模板繼承的方式來做前端，
Laravel-Blade: Layouts Using Template Inheritance
這邊我就直接用Laravel搭配的Tailwind做CSS

讓我們先來做一個Layout吧：

resources/
|--views/
    |--components/
        |--footer.blade.php
    |--layouts/
        |--base.blade.php

檔案裡面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Careers Expo - @section('title')</title>
    <style>
        @yield('css-section')
    </style>
</head>

<body>
@section('sidebar')
    1. This is the master sidebar.
@show
<header>
    @yield('header-content')
</header>

<main class="w-screen overflow-hidden">
    @yield('content')
</main>
</body>

Directive（指令）說明：
@yield 就是讓別人的東西進來
@section 就是要放在哪一段
@include 把我們做的footer放進來，通常語法就是'資料夾.檔案名'

來製作我們的index頁面，然後繼承layout: @extends('layouts.base')

resources/
|--views/
    |--layouts/
        |--base.blade.php
    |--index.blade.php

index.blade.php

@extends('layouts.base')

@section('title', 'Find out your dream career!')
@section('sidebar')
    @parent
    <p>2.我是Index 的Sidebar.</p>
@endsection

@section('header-content')
    我是Header Content區
@endsection

@section('content')
    我是Content區
@endsection

Render出來結果：